<template>
  <div class="tool-bar">
    <div class="bar-left">
      <!--      <el-select-->
      <!--        v-model="pageQuery.areaId"-->
      <!--        placeholder="体检城市"-->
      <!--        clearable-->
      <!--        :loading="cityOptionsLoading"-->
      <!--        class="bar-left-select"-->
      <!--      >-->
      <!--        <el-option-->
      <!--          v-for="item in cityOptions"-->
      <!--          :key="item.value"-->
      <!--          :label="item.label"-->
      <!--          :value="item.value"-->
      <!--        >-->
      <!--        </el-option>-->
      <!--      </el-select>-->
      <el-cascader
        v-model="areaInfo"
        :options="cityOptions"
        :props="casxaderProps"
        placeholder="体检城市"
        class="area-cascader"
        :show-all-levels="false"
        @change="handleChangeArea"
        clearable
      ></el-cascader>
      <el-select
        v-model="pageQuery.year"
        placeholder="体检年份"
        clearable
        :loading="yearOptionsLoading"
        class="bar-left-select"
      >
        <el-option
          v-for="item in yearOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-select
        v-model="pageQuery.status"
        placeholder="发布状态"
        clearable
        class="bar-left-select"
      >
        <el-option
          v-for="item in stateOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-input
        placeholder="请输入指标体系名称"
        v-model="pageQuery.indexName"
        suffix-icon="el-icon-search"
        style="width: 200px"
      >
      </el-input>
    </div>
    <div class="bar-right">
      <!-- <icon-button icon="加" title="新增体系" @click.native="$router.push('addTask')"></icon-button> -->
      <el-button
        v-if="currentUser?.hasPermission(PERMISSIONS.基础指标新增体系)"
        size="small"
        type="primary"
        icon="el-icon-plus"
        @click="goAdd"
        >{{
          currentUser?.getButtonName(PERMISSIONS.基础指标新增体系)
        }}</el-button
      >
      <!-- <icon-button icon="下载" title="一键导入" type="plain"></icon-button>
      <el-button type="text">模板下载</el-button> -->
    </div>
  </div>
</template>

<script>
// import IconButton from '@c/icon-button';
import { getAreaList, getYearList } from '@api/indicator-manage'
import { queryArea } from '@api/question'
import { mapGetters } from 'vuex'
import { PERMISSIONS } from '@/common/user'

export default {
  components: {
    // IconButton,
  },
  props: {
    pageQuery: {
      type: Object,
      required: true,
    },
  },
  computed: {
    ...mapGetters(['currentUser']),
  },
  data() {
    return {
      PERMISSIONS,
      query: {},
      cityOptions: [],
      cityOptionsLoading: true,
      casxaderProps: {
        value: 'areaCode',
        label: 'areaName',
        checkStrictly: true,
        children: 'children',
      },
      areaInfo: [],
      yearOptions: [
        {
          value: '2021',
          label: '2021年',
        },
        {
          value: '2022',
          label: '2022年',
        },
        {
          value: '2023',
          label: '2023年',
        },
        {
          value: '2024',
          label: '2024年',
        },
      ],
      yearOptionsLoading: false,
      stateOptions: [
        {
          value: '1',
          label: '已发布',
        },
        {
          value: '0',
          label: '未发布',
        },
      ],
    }
  },
  created() {},
  mounted() {
    queryArea({
      districtFlag: 'true',
    }).then((res) => {
      if (res.success) {
        const node = this.findNodeById(res.data, this.$store.getters.user.refId)
        this.cityOptions = this.removeChildrenAtLevel([node], 1)[0].children
        this.cityOptionsLoading = false
      }
    })
  },
  methods: {
    findNodeById(tree, targetId) {
      // 遍历树中的每个节点
      for (let i = 0; i < tree.length; i++) {
        // 检查当前节点的ID是否为目标ID
        if (tree[i].areaCode === targetId || tree[i].pkid === targetId) {
          // 如果是的话，返回当前节点
          return tree[i]
        }

        // 如果当前节点有子节点，则递归在子节点中查找
        if (tree[i].children && tree[i].children.length > 0) {
          const foundNode = this.findNodeById(tree[i].children, targetId)
          // 如果在子节点中找到了，则返回找到的节点
          if (foundNode !== undefined) {
            return foundNode
          }
        }
      }

      // 如果在树中没有找到目标ID，则返回undefined
      return undefined
    },
    handleChangeArea(val) {
      this.pageQuery.pageIndex = 1
      if (val.length === 1) {
        this.pageQuery.districtId = val[0]
        this.pageQuery.areaId = null
      } else {
        this.pageQuery.districtId = null
        this.pageQuery.areaId = val[val.length - 1]
      }

      this.$emit('fetchData')
    },
    removeChildrenAtLevel(tree, targetLevel) {
      // 遍历树中的每个节点
      for (let i = 0; i < tree.length; i++) {
        // 检查当前节点的level是否为目标level
        if (tree[i].level === targetLevel) {
          // 如果是的话，移除children属性
          delete tree[i].children
        }

        // 如果当前节点还有子节点，并且子节点的level也为目标level，则递归处理子节点
        if (tree[i].children && tree[i].children.length > 0) {
          this.removeChildrenAtLevel(tree[i].children, targetLevel)
        }
      }

      return tree
    },
    goAdd() {
      this.$router.push('/data-converge/indicator-manage-addTask')
    },
  },
  // watch: {
  //   query: {
  //     handler: function(val) {
  //       this.$emit('pageQueryChange', val);
  //     },
  //     deep: true,
  //   },
  // },
}
</script>

<style lang="scss" scoped>
.tool-bar {
  position: relative;
  width: 100%;
  height: 70px;
  line-height: 70px;
  background: #ffffff;
  // box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  .bar-left {
    position: absolute;
    left: 20px;

    &-select {
      width: 120px;
    }

    :nth-child(n + 2) {
      margin-left: 1rem;
    }
  }
  .bar-right {
    position: absolute;
    right: 20px;
    .el-select {
      margin-right: 10px;
    }
  }
}
</style>
